<template>
    <div>
        <TopNav></TopNav>
        <div class="video">
            <div class="content mt-2">
                <div class="video-item" v-for="item in model" :key="item.id">
                    <div class="title d-flex ai-center ml-3">
                        <div class="author text-red">{{ item.artistName }}</div>
                        <div class="ml-1 mr-1">-</div>
                        <div class="video-name">{{ item.name }}</div>
                    </div>
                    <div
                        class="video-body"
                        @click="playVideo(item.id, item.name, item.artistName)"
                    >
                        <img :src="item.cover" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import service from "@/request/index";
import TopNav from "@/components/home/TopNav.vue";
export default {
    name: "Video",
    components: {
        TopNav,
    },
    data() {
        return {
            model: [],
        };
    },
    components: {},
    methods: {
        async fetch() {
            const res = await service.get("mv/first?limit=30");
            console.log(res);
            this.model = res.data.data;
        },
        playVideo(id, name1, artistName) {
            this.$router.push({
                path: `/playvideo/${id}`,
                query: {
                    name1,
                    artistName,
                },
            });
        },
    },
    mounted() {
        this.fetch();
    },
};
</script>

<style lang="less" scoped>
.video {
    .content {
        .video-item {
            .title {
                height: 1rem;
                line-height: 1rem;
                font-weight: 700;
                .video-name {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .author {
                    white-space: nowrap;
                }
            }
            .video-body {
                height: 3.4rem;
                overflow: hidden;
                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    }
}
</style>